<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>04-列表</title>
</head>

<body>
	<h2>无序列表</h2>
	<ul type="desc">
		<li>desc</li>
		<li>默认</li>
		<li>实心</li>
	</ul>
	<ul type="square">
		<li>square</li>
		<li>样式</li>
		<li>实心方块</li>
	</ul>
	<ul type="circle">
		<li>circle</li>
		<li>样式</li>
		<li>空心</li>
	</ul>
	<ul type="none">
		<li>none</li>
		<li>样式</li>
		<li>无样式</li>
	</ul>
	<ul>
		<li>有更多样式</li>
		<li>但是</li>
		<li>一般使用CSS来实现</li>
	</ul>
	<hr>
	<h2>有序列表<small>——使用不如无序列表多</small></h2>
	<ol type="1">
		<li>type="1"</li>
		<li>默认编号</li>
		<li>列表</li>
	</ol>
	<ol type="A">
		<li>A</li>
		<li>大写字母</li>
		<li>列表</li>
	</ol>
	<ol type="a">
		<li>a</li>
		<li>小写字母</li>
		<li>列表</li>
	</ol>
	<ol type="I">
		<li>type="I"</li>
		<li>大写罗马</li>
		<li>数字列表</li>
	</ol>
	<ol type="i">
		<li>i</li>
		<li>小写罗马</li>
		<li>数字列表</li>
	</ol>
	<hr>
	<h2>定义列表</h2>
	<dl>
		<!-- 定义列表 -->
		<dt>&lt;dt&gt;定义专业术语或名词</dt>
		<dd>&lt;dd&gt;对名词进行解释和描述</dd><!-- 对名词进行解释和描述 -->
		<dt>&lt;dt&gt;苹果</dt>
		<dd>&lt;dd&gt;一种水果</dd><!-- 对名词进行解释和描述 -->
		<dd>&lt;dd&gt;一个品牌</dd><!-- 对名词进行解释和描述 -->
	</dl>
	<hr>
	<h2>列表的嵌套</h2>
	<ul>
		<li>
			<dl>
				<dt>后端</dt>
				<dd>
					<ol type="a">
						<li>Java</li>
						<li>C#</li>
						<li>C</li>
					</ol>
				</dd>
				<dt>前端</dt>
				<dd>
					<ul typt="circle">
						<li>Vue</li>
						<li>React</li>
						<li>Angular</li>
					</ul>
				</dd>
			</dl>
			
		</li>
		<li>
			<dl>
				<dt>数据库</dt>
				<dd>
					<ol type="I">
						<li>Oracle</li>
						<li>MySql</li>
						<li>Redis</li>
					</ol>
				</dd>
				<dt>Linux</dt>
				<dd>
					<ul typt="circle">
						<li>centOS</li>
						<li>RedHat</li>
						<li>Ubuntu</li>
					</ul>
				</dd>
			</dl>		
		</li>
		
	</ul>
		
</body>

</html>